import { BaseComponent } from './../../components/baseComponent';
import { Observable } from 'rxjs';
import { FrontStoreStocksService } from './../../services/frontStoreStocksService';
import { ViewChild } from '@angular/core';
import { PagingMessage, YScrollableContainer } from './../../components/scrollable/y-scrollable-container';
import { MessageBoxService } from './../../components/messageBox/messageBoxService';
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { MdDialog, MdDialogRef } from '@angular/material';
import { ConfirmMessageResult } from './../../components/messageBox/confirmMessage';
import { MdCheckboxModule } from '@angular/material';
import { FrontStoreStockViewModel } from "../../models/frontStoreStock";
import { HandleExpectionErrorUseGrowMessage } from "../../common/decorator/index";
@Component({
    selector: "add-scrap",
    template: `
        <div class="add-container">
            <div class="add-title" fxLayout="row" fxLayoutAlign="space-between center">
                <div>
                    <span>新增报废</span>
                    <span class="margin-l-s">已选 {{checkedCategory}} 种</span>
                    <span class="margin-l-s">已选 {{checkedCount}} 份</span>
                </div>
                <span class="margin-l-m" fxLayoutAlign="center center" (click)="close()"><i class="material-icons text-xxxl">close</i></span>
            </div>
            <div class="add-content" fxLayout="column" fxLayoutAlign="space-between center">
                <div class="add-detail noshrink pct100" fxLayout="column">
                    <div class="detail-title" fxLayout="row">
                        <span fxFlex="10%"></span>
                        <span fxFlex="40%" fxLayoutAlign="start center" class="padding">菜品名称</span>
                        <span fxFlex="15%" fxLayoutAlign="center center" class="padding">库存余量</span>
                        <span fxFlex="25%" fxLayoutAlign="center center" class="padding">报废量</span>
                        <span fxFlex="10%" fxLayoutAlign="center center" class="padding">
                            <md-checkbox [checked]="allChecked" (change)="toggleCheckedAll($event)"></md-checkbox>
                        </span>
                    </div>
                    <ul class="add-list">
                        <y-scrollable-container (change)="pagingMessageChange($event)">
                            <li *ngFor="let item of addScrapList, let i = index" item>
                                <span fxFlex="10%" fxLayoutAlign="center center" class="padding">#{{i+1}}</span>
                                <span fxFlex="40%" fxLayoutAlign="start center" class="padding">{{item.inventory.name}}</span>
                                <span fxFlex="15%" fxLayoutAlign="center center" class="padding">{{item.quantity}}</span>
                                <span fxFlex="25%" fxLayoutAlign="center center" class="padding">
                                <span fxLayout="row" class="add-input" fxFlex="100%">
                                    <span fxLayoutAlign="center center" class="btn-primary" [ngClass]="{'btn-gray':item.scrapQuantity == 0}" fxFlex="25%" (click)="reduce(item)"><i class="material-icons">remove</i></span>
                                    <span fxLayoutAlign="center center" class="add-count" fxFlex="50%">{{item.scrapQuantity ? item.scrapQuantity : 0}}</span>
                                    <span fxLayoutAlign="center center" class="btn-primary" [ngClass]="{'btn-gray':item.scrapQuantity == item.quantity}" fxFlex="25%" (click)="add(item)"><i class="material-icons">add</i></span>
                                </span>
                                </span>
                                <span fxFlex="10%" fxLayoutAlign="center center" class="padding">
                                    <md-checkbox [checked]="item.scrapQuantity > 0" (change)="change(item,$event)"></md-checkbox>
                                </span>
                            </li>
                        </y-scrollable-container>
                    </ul>
                </div>
                <div fxLayout="column" class="pct100">
                    <div fxLayout="row">
                        <span fxFlex="50%" class="btn btn-page border-right" fxLayoutAlign="center center" (click)="pagingInfo.turningPage(-1)"><i class="material-icons text-xxxl">expand_less</i></span>
                        <span fxFlex="50%" class="btn btn-page" fxLayoutAlign="center center" (click)="pagingInfo.turningPage(1)"><i class="material-icons text-xxxl">expand_more</i></span>
                    </div>
                    <div fxLayout="row">
                        <button fxFlex="50%" class="btn-cancel btn" (click)="close()">取消</button>
                        <button fxFlex="50%" class="btn-primary btn" (click)="scrap()">确认报废</button>
                    </div>
                </div>
            </div>
        </div>
    `,
    styleUrls: ['./chefScrap.component.scss']
})

export class AddScrap extends BaseComponent implements OnInit, AfterViewInit {
    @ViewChild(YScrollableContainer)
    private yScrollableContainer: YScrollableContainer;

    constructor(
        private dialogRef: MdDialogRef<AddScrap>,
        private frontStoreStocksService: FrontStoreStocksService
    ) {
        super();
    }
    get allChecked() {
        return this.addScrapList && this.addScrapList.every(x => x.scrapQuantity > 0);
    }

    get checkedCount() {
        return this.addScrapList && this.addScrapList.map(x => x.scrapQuantity).reduce((x, y) => x + y, 0);
    }

    get checkedCategory() {
        return this.addScrapList && this.addScrapList.filter(x => x.scrapQuantity > 0).length;
    }

    private addScrapList$: Observable<Array<FrontStoreStockViewModel>>;
    private addScrapList;

    ngOnInit() {
        const addScrapList$ = this.frontStoreStocksService.getFirstObservableByCondition(x => x.quantity > 0);
        const scrapSub = addScrapList$.subscribe((result) => {
            this.addScrapList = result.map(x => {
                x.scrapQuantity = 0
                return x;
            });
        })

        this.subscriptions.push(scrapSub);
    }
    ngAfterViewInit() {
        this.yScrollableContainer.childrenChanged();
    }

    close(scrapResult?) {
        this.dialogRef.close(scrapResult);
    }

    @HandleExpectionErrorUseGrowMessage()
    async scrap() {
        const result = await MessageBoxService.current.Show("报废", "报废后不能取消，确认报废？");
        if (result == ConfirmMessageResult.Ok) {
            let addScrapItems = this.addScrapList.filter(x => x.scrapQuantity > 0);
            let creator = {
                id: 'aa',
                name: 'aa'
            }
            if (!addScrapItems || addScrapItems.length == 0) {
                throw new Error("请选择报废商品");
            }
            let scrapItems = addScrapItems.map(x => {
                return {
                    frontStoreStockId: x.id,
                    quantity: x.scrapQuantity,
                    inventory: x.inventory
                }
            });
            let scrapResult = await this.frontStoreStocksService.setScrapOut(creator, scrapItems);
            this.close(scrapResult);
        }
    }

    add(item) {
        item.scrapQuantity++;
        if (item.scrapQuantity > item.quantity) {
            item.scrapQuantity = item.quantity;
        }
    }

    reduce(item) {
        item.scrapQuantity--;
        if (item.scrapQuantity <= 0) {
            item.scrapQuantity = 0;
            return false;
        }
    }

    change(item, event) {
        if (event.checked) {
            item.scrapQuantity = item.quantity;
        } else {
            item.scrapQuantity = 0;
        }
    }

    toggleCheckedAll(event) {
        if (event.checked) {
            this.addScrapList.map(x => x.scrapQuantity = x.quantity);
        } else {
            this.addScrapList.map(x => x.scrapQuantity = 0);
        }
    }

    pagingInfo: PagingMessage
    pagingMessageChange(event) {
        this.pagingInfo = event;
    }
}